<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery选择器练习</title>
		<script src='js/jquery-3.7.1.min.js'></script>
		<script>
			$(function(){
				// 初始状态：	.category最后的3个
				let $lis = $('.category ul li:nth-child(n+6)')
				$lis.hide('slow')
				// 点击#btn的按钮，显示全部li，同时按钮内容修改为“精简li列表”
				// 包含html HTML全部高亮
				// $('li a:contains(Html),li a:contains(HTML)').addClass('promt')
				$('li a').filter(':contains(Html),:contains(HTML)').addClass('promt')
				// 再次点击#btn按钮，隐藏.category最后的3个,同时按钮内容修改为“显示全部内容”
				// .text('显示全部内容')	.text()
				// 将包含Html的标签高亮显示
				
				$('#btn').click(function(){
					if($lis.is(':hidden')){
						$lis.show('slow')
						$(this).text('精简li列表').removeClass('down').addClass('up')
						// $('li a:contains(Html)').addClass('promt')
						// $('li a:not(:contains(Html))').removeClass('promt')
					}else{
						$lis.hide('slow')
						$(this).text('显示全部内容').removeClass('up').addClass('down')
						// $('li a:contains(Html)').removeClass('promt')
						// $('li a:not(:contains(Html))').addClass('promt')
					}
				})
			})
		</script>
		<style>
			.up{
				background: url(image/arrow-up.png) no-repeat left center/30px 30px;
			}
			#btn{
				padding-left: 30px;
			}
			.down{
				background: url(image/arrow-down.png) no-repeat left center/30px 30px;
			}
			.promt{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="category">
			<ul>
				<li><a href="#">JQuery安装</a></li>
				<li><a href="#">JQuery语法</a></li>
				<li><a href="#">JQuery选择器</a></li>
				<li><a href="#">Html文档</a></li>
				<li><a href="#">JQuery遍历</a></li>
				<li><a href="#">JQuery动画</a></li>
				<li><a href="#">JQuery ajax</a></li>
				<li><a href="#">JQueryHtml</a></li>
			</ul>
		</div>
		<div class="more">
			<button id="btn" class="down">显示全部内容</button>
		</div>
	</body>
</html>